<template>
    <div class="home-container">
        <div class="home-header">
            <a href="javascript:;" class="city">{{city?city:'定位失败'}}</a>

            <div class="header-search">
                <van-search placeholder="请输入商品名称" v-model="keywork" />
            </div>

            <a href="javascript:;" class="self">
                <van-icon name="contact" />
            </a>
        </div>

        <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
        >
            <van-cell v-for="item in list" :key="item" :title="item + ''"/>
        </van-list>

    </div>
</template>

<script>
    import http from '@/utils/http'
    export default {
        name: "index",
        data() {
            let self = this
            return {
                list: [],
                loading: false,
                finished: false,
                keywork: null,
                city: null
            }
        },
        mounted() {
            this.getCity('111.017393,21.531189')
        },
        methods: {
            onSearch() {

            },
            onCancel() {

            },
            onLoad() {
                setTimeout(() => {
                    for (let i = 0; i < 30; i++) {
                        this.list.push(this.list.length + 1);
                    }
                    this.finished = true
                    this.loading = false;

                }, 500);
            },
            getCity(location) {
                let self = this
                AMap.service('AMap.Geocoder',function(){//回调函数
                    //实例化Geocoder
                    var geocoder = new AMap.Geocoder();

                    //使用geocoder 对象完成相关功能
                    geocoder.getAddress(location, function (status, result) {
                        if(status === 'complete' && result.info === 'OK') {
                            self.city = result.regeocode.addressComponent.city.replace('市', '')
                            self.address = result.regeocode.formattedAddress
                            console.log(result.regeocode.addressComponent)
                        }
                    })
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .home-container{
        margin-top: 50px;
        position: relative;
        .home-header {
            background-color: #f63;
            height: 50px;
            width: 100%;
            position: fixed;
            top: 0;
            color: #fff;
            padding: 0 10px;
            z-index: 111111;
            text-align: center;
            line-height: 50px;
            display: flex;
            flex-direction: row;

            .city {
                position: relative;
                padding-right: 17px;
                color: #fff;
                width: 40px;
                max-width: 60px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;

                &:after {
                    border: 1px solid #fff;
                    position: absolute;
                    right: 2px;
                    top: 50%;
                    margin-top: -8px;
                    display: block;
                    content: "";
                    width: 8px;
                    height: 8px;
                    border-top: none;
                    border-right: none;
                    transform: rotate(-45deg);
                }
            }

            .header-search {
                width: 100%;
                margin: 0 10px;
                //在全局样式(index.scss)中修改输入框样式
            }

            .self {
                display: block;
                width: 50px;
                padding-right: 15px;
                height: 100%;
                padding-top: 2px;
                font-size: 20px;
            }
        }
    }

</style>
